<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('distributedEnter.scanRecord')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<!--最上面的搜索内容-->
			<view class="distributed">
				<!-- 填写内容 -->
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{ $t('distributedEnter.barcodeScan') }}
					</view>
					<view class="custom-card-scan">
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.scanValue"
							:placeholder="$t('stockManage.pleaseScanCode')" @confirm="confirm" @iconClick="iconClick">
						</uni-easyinput>
					</view>

					<view class="custom-card-itemTwo" >
						<text class="item-info-title" style="width:200rpx">{{ $t('finishInventory.checkStatus') }}</text>
						<view class="gui-form-body gui-text-right" style="overflow:visible;">
							<superweiCombox style="text-align:right;" :candidates="data.selectList"
								:placeholder="$t('distributedOut.placeholder')" :isJSON="true" keyName="name"
								@select="select" v-model="data.selectIdText" :defaultValue="$t('smashRemoval.all')">
							</superweiCombox>
						</view>
					</view>
					<view class="custom-card-itemTwo"  style="padding: 10rpx 0;">
						<text class="item-info-title" style="width:200rpx">{{ $t('distributedEnter.materialCode') }}：</text>
						<comboGrid requestUrl="/api1/wms/commonUtil/QueryMaterial" v-model="data.materialCode"
							:requestParam="data.materialParam" inputKey="materialName" :calculate="false"
							:placeholder="$t('distributedEnter.placeholderTextChoose')" gridPlaceholder="输入代码或者名称筛选"
							:column="data.columnName.column" bindValue="materialCode" @setClick="getMaterialClick" style="width:100%">
						</comboGrid>
						<uni-icons class="iconDelete" type="close" v-if="data.materialCode" size="18" color="#999"
							@click="handelMaterialClear"></uni-icons>
					</view>
					<view class="custom-card-itemTwo" style="padding: 10rpx 0;">
						<text class="item-info-title" style="width:180rpx">{{ $t('distributedOut.location') }}：</text>
						<storageBin :ignoreLocationCode="data.ignoreLocationCode" class="gui-text-right"
							requestUrl="/api2/eletile-mes/wmsCheckstockD/getLocationByWarehouseCodeForCCP"
							:requestParam="data.requestParam" :locationUseList="data.locationUseList"
							v-model="data.locationCode" @setClick="getLocationClick" style="width:100%"></storageBin>
						<uni-icons class="iconDelete" type="close" v-if="data.locationCode.length" size="18"
							color="#999" @click="handelClear"></uni-icons>
					</view>
				</view>
				<!--结果区-->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolowerFn">
					<!--条码维度-->
					<view class="custom-form-card" v-for="(x, i) in data.barcodeData" :key="i">
						<uni-collapse v-model="data.value">
							<uni-collapse-item titleBorder="none" :show-animation="true" :name="''+i">
								<view class="content" style="margin-bottom: 20rpx;">
									<view class="card-mini-head">
										<view class="title-line"></view>
										<text>{{ $t('translationImage.serialNumber') }}：{{ i + 1 }}</text>
									</view>
									<view class="custom-card-itemOne">
										<view class="card-item-100">
											<text
												class="item-info-title">{{ $t('distributedEnter.barcode') }}：</text>{{ x.barcode }}
										</view>
									</view>
									<view class="custom-card-itemOne">
										<view class="card-item-50">

											<text
												class="item-info-title">{{ $t('distributedEnter.materialCode') }}：</text>{{ x.materialCode }}
										</view>
									</view>
									<view class="custom-card-itemOne">
										<text
											class="item-info-title">{{ $t('distributedEnter.materialName') }}：</text>{{ x.materialName }}
									</view>
									<view class="custom-card-itemOne">
										<text
											class="item-info-title">{{ $t('distributedEnter.materialSpec') }}：</text>{{ x.materialSpec }}
									</view>
									<view class="custom-card-itemOne">
										<view class="card-item-50"><text
												class="item-info-title">{{ $t('distributedEnter.qty') }}：</text>{{ x.stockQty }}
										</view>
										<view class="card-item-50"><text
												class="item-info-title">{{ $t('distributedEnter.uom') }}：</text>{{ x.unit }}
										</view>
									</view>
									<view class="custom-card-itemOne">
										<view class="card-item-50"><text
												class="item-info-title">{{ $t('finishInventory.warehouseCode') }}：</text>{{ x.warehouseCode }}
										</view>
										<view class="card-item-50"><text
												class="item-info-title">{{ $t('finishInventory.locationCode') }}：</text>{{ x.locationCode
											}}
										</view>
									</view>
									<view class="custom-card-itemOne">
										<view class="card-item-50">
											<text class="item-info-title">{{ $t('pageTranslation.chekStatus') }}：</text>
											<view class="btnSuccess" v-if="x.ckeckFlag == 'Y'">
												{{ $t('finishInventory.checked') }}</view>
											<view class="btnError" v-else>{{ $t('finishInventory.unchecked') }}</view>
										</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>

					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.barcodeData.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import {navigate,navigateBack} from '@/utils/routerSkip.js';
import {ref,reactive,toRaw,watch,computed,onMounted} from 'vue';
import storageBin from '@/components/storageBin.vue';
import comboGrid from "@/components/comboGrid";
import superweiCombox from '@/components/superweiCombox';
import {onShow, onLoad,onHide} from '@dcloudio/uni-app';

import {TEST_URL,PROD_URL,IMG_BASE_URL} from '@/constant/config.js'
import {TOKEN} from '@/constant/index.js';
import {basPdaOperationLogFn} from '@/utils/index.js';
import {OPERATION_COMMIT,OPERATION_SCAN} from '@/constant/index.js'
import {getDataDictionaryFn,base64toFile} from '@/utils/index.js'
//API引入
import {selectWmsCheckStocked,getDetailInfo} from '@/api/api.js'
//扫描条码的引入
import pdaScan from '@/hooks/pdaScan.js'
import {useStore} from "vuex";
import {forEach} from '../../../uni_modules/u-ajax/js_sdk/lib/utils';

//国际化引入
import {useI18n} from 'vue-i18n';
const {t } = useI18n();

const {scan} = pdaScan()

//注册组件
components: {
	storageBin,
		comboGrid
}

let data = reactive({
	billid: '', //盘点单号id
	billCode: "", //上级界面传过来的billCode
	scanValue: '', //扫描信息
	materialId: '', //物料id
	materialCode: '', //物料编码
	locationCode: '', //库位code
	locationId: '', //库位id
	locationName: '', //库位名称
	ignoreLocationCode: [],
	noticeHooks: false,
	isLoading: false,
	isFinish: false,
	barcodeData: [], //条码维度返回的信息
	value: ['0'], //card的展开
	page: 1,
	rows: 20,
	//物料代码的传参
	materialParam: {
		text: '',
		materialCode: "",
		materialName: "", //物料代码,传给接口用的变量
	},
	// 库位的传参
	requestParam: {
		locationCode: "",
		warehouseCode: 'RM'
	},
	//物料代码的下拉选择器
	columnName: {
		column: [{
			label: t('distributedEnter.materialCode'),
			name: "materialCode",
		}, {
			label: t('distributedEnter.materialName'),
			name: "materialName",
		}]
	},
	// 库位的下拉选择器
	columnLocation: {
		column: [{
			label: t('JsInternational.volumnStockName'),
			name: "locationCode",
		}, {
			label: t('JsInternational.volumnStockOf'),
			name: "maxCapacity",
		}]
	},

	selectList: [{
		id: '',
		name: t('smashRemoval.all')
	}, {
		id: 'Y',
		name: t('finishInventory.checked')
	}, {
		id: 'N',
		name: t('finishInventory.unchecked')
	}],// 校验状态数组

	selectIdText: '',
	selectId: ''
})

onShow(() => {
	 const pages = getCurrentPages();
	 console.log('page',pages)
	  if (pages[pages.length - 1].route === 'pages/check/rmCheck/rmScanDetail') {
		  uni.$on('scancodedate', (data) => {
		  	console.log('获取到的code：' + data.code)
		  	getCode(data.code, 'pda')
		  })
	  }

	data.page = 1
	data.rows = 20
	selectMaterial()
})


onHide(()=>{
	uni.$off("scancodedate")
})

onMounted(() => {
	// uni.$on('scancodedate', (data) => {
	// 	console.log('获取到的code：' + data.code)
	// 	getCode(data.code, 'pda')
	// })
})

onLoad((options) => {
	data.billCode = options.billCode
	data.billid = options.billid
})


// 校验状态的选择事件
const select = (e) => {
	data.selectId = e.id;
	data.page = 1
	data.rows = 20
	selectMaterial()
}

// 用户调起相机扫码
const iconClick = async (type) => {
	console.log(type)
	if (type === 'suffix') {
		let code = await scan()
		getCode(code, 'scan')
	}
}
// 用户点击键盘上搜索
const confirm = () => {
	getCode(data.scanValue, 'keydown')
}

// 获取code，查询barcode信息
const getCode = (code, type) => {
	data.scanValue=code
	let parmes = { //根据barcode查询物料详情
		barcode: data.scanValue,
		masterId: data.billid,
		locationCode: '',
		materialCode: ''
	}
	selectWmsCheckStocked(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '盘点-RM-原材料'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.code, //返回状态
				errorMessage: res.msg, //错误信息
				isPass: res.code == 0 ? 'Y' : 'N', //是否成功 Y N
				operationType: OPERATION_SCAN,
				module: 'WMS',
				source: "PDA",
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) { }
		if (res.code == 0) {
			data.scanValue = code //扫描的条码
			data.page = 1
			data.rows = 20
			selectMaterial() // 去查询条码

		} else {
			uni.showToast({
				title: res.msg,
				icon: "none"
			});
		}
	})
}

// 物料代码的选择
const getMaterialClick = (x) => {
	data.materialId = x.id
	data.materialCode = x.materialCode;
	data.page = 1
	data.rows = 20
	selectMaterial()

}

//库位选择之后赋值给变量
const getLocationClick = (x) => {
	data.locationId = x.id
	data.locationName = x.locationName;
	data.locationCode = x.locationCode;
	data.page = 1
	data.rows = 20
	selectMaterial()

}

//物料代码查询
const selectMaterial = () => {
	getDetailInfo({ //根据物料代码查询物料详情
		barcode: data.scanValue,
		billCode: data.billCode,
		locationCode: data.locationCode,
		materialCode: data.materialCode,
		ckeckFlag: data.selectId,
		page: data.page,
		rows: data.rows
	}).then(res => {
		data.isLoading = false;
		if (res.code == 0) {
			data.noticeHooks = false
			const rows = res.data?.records || [];
			if (data.page == 1) {
				if (rows.length == 0) {
					data.noticeHooks = true
				}
				data.barcodeData = rows
			} else {
				data.barcodeData.push(...rows)
			}
			data.barcodeData?.forEach((item,index)=>{
				if(index!==0){
					data.value.push(''+index)
				}
			})
			data.noticeHooks = data.barcodeData.length >= res.data?.total || 0
			data.isFinish = data.barcodeData.length >= res.data?.total || 0;
		}
	})
}



const handelClear = () => {
	data.locationCode = ""
	data.locationName = ""
	data.locationId = null
	data.page = 1
	data.rows = 20
	selectMaterial()
}

const handelMaterialClear = () => {
	data.materialId = null
	data.materialCode = "";
	data.page = 1
	data.rows = 20
	selectMaterial()
}

// 下拉加载
const scrolltolowerFn = () => {
	if (!data.noticeHooks) {
		data.page++
		data.isLoading = true;
		selectMaterial()
	}
}
</script>

<style lang="scss" scoped>
// .card-my{
// 	display: flex;
// 	flex-direction: column;
// }
.addflex {
	display: flex;
	align-items: center;

	.itemflex {
		flex: 1;
	}
}

.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 200rpx);
	// height: 100vh;
}

.scroll {
	margin-top: 15rpx;
	flex: 1;
	height: 2rpx;
}

.page-bottom-box {
	position: fixed;
}

.addborder {
	border: 1rpx solid #DCDFE6;
	box-sizing: border-box;
	padding: 15rpx;
	margin-bottom: 15rpx;
	border-radius: 8rpx;
}

.input-dialog-itembox {
	padding: 15rpx;
	box-sizing: border-box;
	border: 1rpx solid #DCDFE6;
	margin-bottom: 15rpx;
	border-radius: 8rpx;
}

.input-dialog-item {
	font-size: 24rpx;
}

.input,
.textarea {
	font-size: 24rpx;
}

.iconDelete {
	margin-top: 20rpx;
	height: 100%;
	width: 40rpx;
}

.item-info-title {
	margin-left: 10px;
}


.btnSuccess {
	width: 120rpx;
	height: 40rpx;
	line-height: 40rpx;
	color: #fff;
	background-color: #007aff;
	display: inline-block;
	text-align: center;
	border-radius: 10rpx;
}

.btnError {
	width: 120rpx;
	height: 40rpx;
	line-height: 40rpx;
	color: #fff;
	background-color: red;
	display: inline-block;
	text-align: center;
	border-radius: 10rpx;
}


.btnCancel {
	width: 120rpx;
	height: 40rpx;
	line-height: 40rpx;
	color: #fff;
	background-color: #f08d49;
	display: inline-block;
	text-align: center;
	border-radius: 10rpx;
}

.btnPanDian {
	width: 120rpx;
	height: 40rpx;
	line-height: 40rpx;
	color: #fff;
	background-color: #42b983;
	display: inline-block;
	text-align: center;
	border-radius: 10rpx;
}

.flexRight {

	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.card-mini-head {
	display: flex;
}
</style>
